<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 地图对象
    class Domain {
      constructor() {
        this.ele = document.createElement("div")
        this.setStyle()
      }

      setStyle() {
        this.ele.style.width = "600px"
        this.ele.style.height = "600px";
        this.ele.style.position = "relative"
        this.ele.style.border = "1px solid";
        this.ele.style.margin = "0 auto";
        document.body.appendChild(this.ele);
      }
    }
    let map1 = new Domain()

    // 方块对象
    class Rect {
      constructor(x, y, color) {
        this.ele = document.createElement("div")
        this.x = x;
        this.y = y;
        this.color = color
        this.setStyle()
      }

      setStyle() {
        this.ele.style.width = "50px"
        this.ele.style.height = "50px"
        this.ele.style.position = "absolute"
        this.ele.style.left = this.x + "px"
        this.ele.style.top = this.y + "px"
        this.ele.style.backgroundColor = this.color
        map1.ele.appendChild(this.ele)
      }
    }
    // let d1 = new Rect(0, 0, "red")

    // 构建蛇类 

    class Snake {
      constructor() {
        // 蛇的身体  
        this.bodyArr = [];
        this.createBody();
        // this.addDomain();
        this.move()
        // 定义蛇头方向
        this.dir = "right"
      }
      createBody() {
        for (let i = 0; i < 3; i++) {
          if (i == 2) {
            this.bodyArr.push(new Rect(i * 50, 0, "red"));
          } else {
            this.bodyArr.push(new Rect(i * 50, 0, "blue"));

          }
        }
      }
      // addDomain(){
      //     for(let i=0;i<this.bodyArr.length;i++){
      //         map1.ele.appendChild(this.bodyArr[i].ele);
      //     }
      // }
      move() {
        setInterval(() => {
          let head = this.bodyArr[this.bodyArr.length - 1];
          let pos = {
            x: parseInt(head.ele.style.left),
            y: parseInt(head.ele.style.top)
          }
          switch (this.dir) {
            case "right":
              // 1.蛇头移动一个距离 
              head.ele.style.left = parseInt(head.ele.style.left) + 50 + "px";
              break;
            case "left":
              // 1.蛇头移动一个距离 
              head.ele.style.left = parseInt(head.ele.style.left) - 50 + "px";
              break;
            case "up":
              // 1.蛇头移动一个距离 
              head.ele.style.top = parseInt(head.ele.style.top) - 50 + "px";
              break;
            case "down":
              // 1.蛇头移动一个距离 
              head.ele.style.top = parseInt(head.ele.style.top) + 50 + "px";
              break;
          }

          // 2.把蛇尾巴删除；
          let res = this.bodyArr.shift();  // 把数组里的rect对象删除
          res.ele.remove(); // 把rect 对象里的元素删除掉；
          // 3.在原来蛇头的位置 添加一个元素；
          this.bodyArr.splice(this.bodyArr.length - 1, 0, new Rect(pos.x, pos.y, "blue"));
        }, 1000);


      }
    }

    let snake = new Snake();

    document.onkeydown = function (e) {
      switch (e.key) {
        case "w":
          if (snake.dir !== "down") {
            snake.dir = "up";
          }
          break;
        case "a":
          if (snake.dir !== "right") {
            snake.dir = "left";
          }
          break;
        case "s":
          if (snake.dir !== "up") {
            snake.dir = "down";
          }
          break;
        case "d":
          if (snake.dir !== "left") {
            snake.dir = "right";
          }
          break;
      }
    }
  </script>
</body>

</html>